<script setup lang="ts">
import fyjk from '~~/public/img/fyjk.png'
import ggaq from '~~/public/img/ggaq.png'
import ggws from '~~/public/img/ggws.png'
import jbcs from '~~/public/img/jbcs.png'
import jksy from '~~/public/img/jksy.png'
import mbfz from '~~/public/img/mbfz.png'
import xljk from '~~/public/img/xljk.png'
import zyys from '~~/public/img/zyys.png'
import { getCategoryList, getHealthKL, getHomeSwiperImage, getSearchDetail } from '~/api/home'
import SwiperList from './SwiperList.vue'

const router = useRouter()
const navList = ref()
const cateData = [{
  title: '健康素养',
  icon: jksy,
  list: [
    {
      title: '健康知识',

    },
    {
      title: '戒烟限酒',

    },
    {
      title: '科技创新',
    },
    {
      title: '健康技能',
    },
    {
      title: '适量运动',
    },
    {
      title: '其他',
    },
  ],
}, {
  title: '公共卫生',
  icon: ggws,
  list: [
    {
      title: '新冠肺炎',
    },
    {
      title: '传染病预防',
    },
    {
      title: '预防接种',

    },
    {
      title: '地方病预防',

    },
    {
      title: '职业健康',

    },
    {
      title: '环境健康',

    },
    {
      title: '其他',

    },
  ],
}, {
  title: '疾病常识',
  icon: jbcs,
  list: [
    {
      title: '呼吸系统疾病',
    },
    { title: '循环系统疾病' },
    { title: '泌尿系统疾病' },
    { title: '消化系统疾病' },
    { title: '运动系统疾病' },
    { title: '内分泌系统疾病' },
    { title: '神经系统疾病' },
    { title: '口腔健康' },
    { title: '康复护理' },
    { title: '其他' },
  ],
}, {
  title: '妇幼保健',
  icon: fyjk,
  list: [
    {
      title: '儿童保健',
    },
    { title: '妇女保健' },
    {
      title: '孕产保健',

    },
    {
      title: '其他',

    },
  ],
}, {
  title: '慢病防治',
  icon: mbfz,
  list: [
    {
      title: '高血压',
    },
    { title: '高血脂' },
    {
      title: '糖尿病',

    },
    {
      title: '脑卒中',

    },
    {
      title: '慢阻肺',

    },
    {
      title: '哮喘',

    },
    {
      title: '其他',

    },
  ],
}, {
  title: '心理健康',
  icon: xljk,
  list: [
    {
      title: '心理疾病',
    },
    { title: '儿童青少年心理' },
    {
      title: '婚姻家庭',

    },
    {
      title: '社会关系',

    },
    {
      title: '老年心理',

    },
    {
      title: '其他',

    },
  ],
}, {
  title: '中医养生',
  icon: zyys,
  list: [
    {
      title: '中医知识',
    },
    { title: '非药物疗法' },
    {
      title: '情志养生',

    },
    {
      title: '时令养生',

    },
    {
      title: '起居养生',

    },
    {
      title: '运动养生',

    },
    {
      title: '饮食养生',

    },
    {
      title: '其他',

    },
  ],
}, {
  title: '公共安全',
  icon: ggaq,
  list: [
    {
      title: '急救知识',
    },
    { title: '事故灾害' },
    {
      title: '其他',
    },
  ],
}]

const currentCate = ref('')
const currentSubCate = ref('')
const currentSubCateList = computed(() => {
  if (currentCate.value !== '') {
    // const cate = cateData[currentCate.value] || { list: [] }
    return navList.value.find(item => item.classify_name === currentCate.value)
  }
  return null
})

function tohel(path1: any, path2: any) {
  console.log(path1, path2)
  router.push({
    path: '/peopleHealth/knowledge',
    query: {
      // type: `${path1.title}/${path2}`,
      type: `${path1.classify_name}/${path2}`,
    },
  })
}

getData()

function getIcon(name1: any) {
  switch (name1) {
    case '健康素养':
      return jksy
    case '公共卫生':
      return ggws
    case '疾病常识':
      return jbcs
    case '妇幼保健':
      return fyjk
    case '慢病防治':
      return mbfz
    case '心理健康':
      return xljk
    case '中医养生':
      return zyys
    case '公共安全':
      return ggaq
    default:
      break
  }
}

function getData() {
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '健康知识%',
    }],
  }).then((res) => {
    navList.value = res.data[0].children
  })
}

export interface Banner {
  id: number
  title_name: string
  cover_file_name: string
  category: string
  classify_name: string
  pt_uid: string
  [key: string]: any
  uid: string
}
const bannerList = ref<Banner[]>([])

function getBannerList() {
  const req = {
    page: {
      pageNo: 1,
      rownumber: 8,
    },
    condition: [{ colName: 'positions', ruleType: 'inset', value: '首页' }],
  }
  getHomeSwiperImage(req).then((res) => {
    // getHealthKL(req).then((res) => {
    bannerList.value = res.data
  })
}

getBannerList()

function getLinkUrl(item) {
  let url = ''
  const category = item.category || item.classify_name || ''

  if (category.split('/')[0] === '健康陕西') {
    url = `/peopleHealth/healthyShaanxiDetail?id=${item.id}`
  }
  else if (category === '头条资讯') {
    url = `/peopleHealth/topNewsDetail?id=${item.id}`
  }
  else if (category.split('/')[0] === '百姓健康系列栏目') {
    url = `/peopleHealth/peopleHealthSeriesDetail/${item.id}?type=${item.classify_name.split('/')[1]}&ptUid=${item.pt_uid}`
  }
  else if (category.split('/')[0] === '健康知识') {
    url = `/peopleHealth/knowledgeDetail/${item.id}&1`
  }
  else if (category.split('/')[0] === '科普资料') {
    url = `/peopleHealth/popularizationDetail/${item.id}&${item.classify_name.split('/')[1]}`
  }
  else if (category.split('/')[0] === '宣传活动') {
    url = `/peopleHealth/HealthActivityDetail/${item.id}&${item.classify_name.split('/')[1]}`
  }
  else if (category?.indexOf('中医科普资料') === 0 && item?.id) {
    url = `/peopleHealth/outKnowledgeDetail/${item.id}&中医健康科普详情`
  }
  return url
}

const healthKnowledge = ref<any[]>([])
function getHealthKnowledge() {
  getHealthKL({
    page: {
      pageNo: 1,
      rownumber: 8,
    },
    condition: [{ colName: 'positions', ruleType: 'inset', value: '首页' }],
  }).then((res) => {
    if (Array.isArray(res.data)) {
      healthKnowledge.value = res.data.map((item) => {
        item._linkUrl = getLinkUrl(item)
        return item
      })
    }
  })
}
getHealthKnowledge()
</script>

<template>
  <div class="relative min-h-400px flex px-60 py-6">
    <div class="min-w-180px w-180px">
      <div
        class="relative rounded-22px xl:mb-0"
        @mouseleave="currentCate = ''"
      >
        <div>
          <div class="left shadow-xl">
            <div
              v-for="(item) in navList"
              :key="item.classify_name"
              class="content flex cursor-pointer items-center px-5 py-3"
              :class="{ active: currentCate === item.classify_name }"
              @mouseover="currentCate = item.classify_name"
            >
              <img
                :src="getIcon(item.classify_name)"
                alt=""
                class="mr-10px"
              >
              <div
                class="sub-title pr-15px font-bold"
                text="16px"
              >
                {{ item.classify_name }}
              </div>
              <div>
                <i class="i-carbon-caret-right" />
              </div>
            </div>
          </div>
          <div
            v-if="currentSubCateList"
            class="absolute left-180px top-0 z-2 h-full w-500px"
          >
            <div
              v-if="currentSubCateList"
              class="h-full w-full flex flex-col bg-#ffffffcc p-15px"
              @mouseleave="currentCate = ''"
              @mousemove="currentSubCate = currentSubCateList.classify_name"
            >
              <div class="h-full w-full p-15px">
                <div
                  class="item-box"
                  grid="~ cols-2 gap-10px"
                >
                  <div
                    v-for="subItem in currentSubCateList.children"
                    :key="subItem.classify_name"
                    class="text-left text-16px line-height-34px"
                    hover="text-#0E9472 cursor-pointer"
                    @click="tohel(currentSubCateList, subItem.classify_name)"
                  >
                    <span class="mr-10px inline-block h-5px w-5px bg-#0E9472" />
                    <span>
                      {{ subItem.classify_name }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="min-w-700px flex flex-1 flex-col xl:flex-row">
      <!-- <SwiperList
        v-if="bannerList && bannerList.length"
        :list="bannerList"
      /> -->
      <div class="h-full min-h-380px min-w-600px w-700px shadow-xl">
        <el-carousel
          motion-blur
          h-full
          height="100%"
          trigger="click"
          :autoplay="true"
        >
          <el-carousel-item
            v-for="item in bannerList"
            :key="item.id"
          >
            <NuxtLink
              :to="getLinkUrl(item)"
              target="_blank"
              class="pos-relative"
            >
              <el-image
                class="h-full w-full"
                :src="getImgUrl(item.cover_file_name)"
                fit="fill"
              />
              <p
                class="absolute bottom-0 left-0 right-0 z-99 flex justify-between bg-#000/65 p-10px text-14px text-#fff"
                hover="text-#ccc"
              >
                <span class="w-70% truncate">
                  {{ item.title_name }}
                </span>
                <span class="text-12px">{{ item.origin || '' }}</span>
              </p>
            </NuxtLink>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="mt-20px min-w-200px w-full pl-20px shadow-xl xl:mt-0 xl:w-[calc(100%_-_700px)]">
        <div>
          <span class="b-b-5px b-#35B389 b-solid pb-5px font-bold">
            健康知识
          </span>
        </div>
        <ul class="my-20px">
          <li
            v-for="item in healthKnowledge"
            :key="item.id"
            class="flex cursor-pointer items-center py-6px text-#333"
            hover="text-#0E9472"
          >
            <span class="mr-10px inline-block h-5px w-5px bg-#0E9472" />
            <div class="mr-10px flex-1 truncate text-lg">
              <NuxtLink
                hover=" b-b-#0E9472 b-b-solid b-b-1px"
                :to="item._linkUrl"
              >
                {{ item.title_name }}
              </NuxtLink>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="mt-20px min-w-200px w-full w-full py-10px pl-20px shadow-xl xl:hidden">
      <div>
        <span class="b-b-5px b-#35B389 b-solid pb-5px font-bold">
          健康知识
        </span>
      </div>
      <ul class="my-20px">
        <li
          v-for="item in healthKnowledge"
          :key="item.id"
          class="flex items-center justify-between py-6px text-#333"
        >
          <div class="flex flex-1 items-center overflow-hidden">
            <span class="mr-10px inline-block h-5px w-5px bg-#0E9472" />
            <div class="mr-10px flex-1 truncate text-lg">
              <NuxtLink hover=" b-b-#0E9472 b-b-solid b-b-1px text-#0E9472" :to="item._linkUrl">
                {{ item.title_name }}
              </NuxtLink>
            </div>
          </div>
          <span class="mr-20px w-200px">{{ item.release_time || item.create_time }}</span>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<style scoped lang="scss">
.active {
  color: #27a280;
  border-left: 2px solid #27a280;
  background-color: rgba(235, 247, 245, 1);
}
</style>
